﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubtractJS</title>
    <link rel="stylesheet" href="css/subtractjs.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <script type="text/javascript" src="Scripts/jQuery-2.0.3.min.js"></script>
    <script type="text/javascript" src="Scripts/Subtract.min.js"></script>
    <script type="text/javascript" src="Scripts/SubtractJSDocumentation.min.js"></script>
    <style type="text/css">
        .dontDoThis {
            color: red;
        }
    </style>
</head>
<body>
    <form action="#">
        <div class="sj-fill-top header screenSection fancyblue">
            <div>
                <img class="subtractLogo" src="Images/subtract-logo.png" />
                SubtractJS
            </div>
        </div>
        <div class="sj-fill-top menubar">&nbsp;</div>
        <div class="sj-fill articleBody main">
            <div class="question">Do I have to have a reference to jQuery?</div>
            <div class="answer">Yes.  SubtractJS uses jQuery functions to locate elements, change css properties, etc.</div>
            <div class="question">The CSS properties in the style attribute on my element are having no effect.  Why is that?</div>
            <div class="answer">
                SubtractJS uses, updates, or deletes a number of css properties at the element level.  A inline css property (like the following height property) specified as
                <span class="inlineHtml dontDoThis">&lt;div class=&quot;sj-fill-top&quot; style=&quot;height: 50px&quot;&gt;&lt;/div&gt;&lt;!-- bad. don&#39;t do this --&gt;</span>
                will be cleared by SubtractJS.<br />
                <br />
                The way to specify the css property is specify either an id or class (or both) for it, I.E. <span class="inlineHtml">
                    &lt;div id=&quot;myHeader&quot; class=&quot;myStyle sj-fill-top&quot; &gt;&lt;/div&gt;
                </span>
                and create a style sheet for it (either inline in your document or a separate loaded style sheet) with something like
                <pre class="inlineHtml">
&lt;style type=&quot;text/css&quot;&gt;
    /* applies to myHeader only */
    #myHeader {
        overflow: auto;
        height: 100px;
    }
    /* applies to any tag with the myStyle class */
    .myStyle {
        margin: 5px;
        border: 2px solid black;
        padding: 10px;
    }
&lt;/style&gt;                
</pre>

            </div>
            <div class="question">What CSS properties does SubtractJS manipulate?</div>
            <div class="answer">
                On "sj-fill-right" and "sj-fill-left" elements, SubtractJS manipulates the "left" and "width" properties to cause that element to fill the
                alotted space.<br />
                <br />
                On "sj-fill-top" and "sj-fill-bottom" elements, SubtractJS manipulates the "top" and "height" properties to cause that element to fill the
                alotted space.<br />
                <br />
                A parent element is one that contains a filler element such as "sj-fill-top", "sj-fill-right", or "sj-fill".  A parent element must have the
                "position" property set to "absolute" or "relative".  The parent element's "overflow" will be (temporarily) manipulated, so, if you need to
                set the "overflow" on a parent element, be sure to set it in a style sheet.<br />
                <br />
                SubtractJS sets the following properties on all elements it manipulates:
                <ul class="plainlist">
                    <li>position: "absolute"</li>
                    <li>display: "block"</li>
                </ul>
                <br />
                SubtractJS sets the following properties on the html and body elements to enable a full-page layout.  If you are only using SubtractJS in
                child elements, you can call SubtractJS.SetBodyNoInit() before page load to prevent these properties from being set.
                <ul class="plainlist">
                    <li>height: "100%",</li>
                    <li>width: "100%",</li>
                    <li>margin: "0",</li>
                    <li>padding: "0",</li>
                    <li>border: "0px none"</li>
                </ul>
            </div>
            <div class="question">
                What properties should I manipulate to get the most out of SubtractJS?
            </div>
            <div class="answer">
                For "sj-fill-top" and "sj-fill-bottom" elements, you <span class="accentuate2">may</span> specify the "height" property.  If you don't specify it, the rendering engine will use
                a height relevent to the size of your contents.<br />
                <br />
                For "sj-fill-left" and "sj-fill-right" elements, you <span class="accentuate2">must</span> specify the "width" property.  The rendering engines default the width to about 100%,
                which is most likely not what you want here.<br />
                <br />
                SubtractJS reads from the border, margin, and padding properties to compute a size that fills 100% of the available space
                while allowing for the specified border, margin, and padding.<br />
                I recommend that you experiment with different values for margin, border, and padding to get an idea of what you can do.<br />
                <br />
                Any values you specify for margin, border, and padding are interpreted by
                SubtractJS as inside the area that it is trying to fill.  For example, if you specify "sj-fill-top" with a margin of 5px, a border of 2px,
                and a padding of 3px, SubtractJS will size your element to fill the entire width of the top allowing enough space that your 2px wide border
                has a margin of 5px between it and the edge of the screen on both sides.
            </div>

            <div class="question">
                If I use jQuery's RemoveClass (or another method) to remove the SubtractJS classes, can I get control of my object back from SubtractJS?
            </div>
            <div class="answer">
                After you remove a class that SubtractJS uses, you should call SubtractJS.ClearSubtractJS(element) to revert the style to its original
                value from page load.  Then call SubtractJS.UpdateLayout() to update your layout.
            </div>

            <div class="question">
                If I use jQuery's AddClass to add a SubtractJS class, how to I make it take effect immediately?
            </div>
            <div class="answer">
                Call SubtractJS.UpdateLayout()
            </div>

            <div class="question">
                Can I hide or show a SubtractJS object?
            </div>
            <div class="answer">
                Just hide or show as you normally would, i.e. by using jQuery's .hide() and .show() commands, then call SubtractJS.UpdateLayout()
                to update your layout.
            </div>

            <div class="question">
                How do I animate hiding or showing a SubtractJS object?
            </div>
            <div class="answer">
                SubtractJS.UpdateLayout must be called throughout the animation process.  I used the following options for jQuery's animate command.
                <pre>
var options = {
    "duration": 100,
    "progress": SubtractJS.UpdateLayout,
    "complete": SubtractJS.UpdateLayout
};
</pre>
            </div>
            <div class="question">
                I have other css classes named "sj-something".  Can I change the prefix?
            </div>
            <div class="answer">
                Yes.  Call SubtractJS.SetPrefix(newPrefix); after you have loaded SubtractJS but before the page load event.
                For example, put this in your &lt;head&gt; tag:<br />
                <br />
                <span class="inlineHtml">
                    &lt;script src=&quot;/Scripts/jQuery-2.0.3.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
                    &lt;script src=&quot;/scripts/Subtract.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
                    &lt;script type=&quot;text/javascript&quot;&gt;<br />
                    SubtractJS.SetPrefix(&quot;fun&quot;);<br />
                    &lt;/script&gt;&lt;br /&gt;<br />
                </span>
            </div>
        </div>
    </form>
</body>
</html>
